<template>
  <el-container class="dashboard-editor-container">
    <!--      <el-header class="dashboard-header">-->
    <!--        <p>您好！-->
    <!--          <router-link to="/user/profile">-->
    <!--            <span style="color: #FF0000"><i>{{ username }}</i></span>-->
    <!--          </router-link>-->
    <!--        </p>-->
    <!--      </el-header>-->
    <el-main class="dashboard-main">
      <el-card
        v-for="menu in menus"
        :key="menu.name"
        class="dashboard-main-row"
        :body-style="cardStyle"
      >
        <div slot="header" class="menu-title">
          <svg-icon v-if="menu.meta" :icon-class="menu.meta.icon" class="menu-cell-title" />
          <span>{{ menu.meta.title }}</span>
        </div>
        <div class="menu-content">
          <el-col
            v-for="cMenu in menu.children"
            :key="cMenu.name"
            :span="3"
            class="menu-content-cell"
          >
            <app-link :to="formatPath(menu.path, cMenu.path)" class="menu-content-cell-link">
              <el-container>
                <el-main class="menu-content-cell-icon">
                  <svg-icon v-if="cMenu.meta" :icon-class="cMenu.meta.icon" style="width: 40px; height: 40px" />
                </el-main>
                <el-footer height="30px">
                  <span>{{ cMenu.meta.title }}</span>
                </el-footer>
              </el-container>
            </app-link>
          </el-col>
        </div>

      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import path from 'path'
import { mapGetters } from 'vuex'
import AppLink from '../layout/components/Sidebar/Link'

export default {
  name: 'Index',
  components: {
    AppLink
  },
  data() {
    return {
      cardStyle: {
        padding: 0
      },
      containerHeight: 853
    }
  },
  computed: {
    ...mapGetters(['permission_routes', 'user']),
    menus() {
      const list = []
      this.permission_routes.forEach(item => {
        if ('hidden' in item && !item.hidden) {
          list.push({ meta: item.meta, name: item.name, children: this.getMenuCell(item.children), path: item.path })
        }
      })
      return list
    },
    username() {
      const user = this.user
      return user.ftype === 40 ? user.remark : user.nickName
    }
  },
  created() {
  },
  methods: {
    formatPath(basePath, routePath) {
      return path.resolve(basePath, routePath)
    },
    getMenuCell(menuList = [], parent = {}) {
      let result = []
      if (menuList.length === 0) {
        return result
      }
      menuList.forEach(item => {
        if (!item.hidden) {
          if (item.redirect === 'noRedirect' && 'children' in item) {
            result = result.concat(this.getMenuCell(item.children, item))
          } else {
            const parentPath = parent.path
            const menuItem = { meta: item.meta, name: item.name, children: this.getMenuCell(item.children), path: item.path }
            if (parentPath) {
              let routePath = this.formatPath(parentPath, item.path)
              if (routePath.startsWith('/')) {
                routePath = '.' + routePath
              }
              menuItem.path = routePath
            }
            result.push(menuItem)
          }
        }
      })
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    height: 100%;
    padding: 12px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 12px;
    }
    .dashboard-header {
      font-size: 18px;
      color: rgb(85, 85, 85);
    }
    .dashboard-main {
      padding: 0;

      .dashboard-main-row {
        /deep/ .el-card__header {
          padding: 0 !important;
        }
        .menu-title {
          background-color: #fff;
          color: #666;
          font-weight: 600;
          display: flex;
          align-items: center;
          height: 40px;
          padding-left: 10px;
        }
        .menu-cell-title {
          margin-right: 10px;
        }
        .menu-content {
          background-color: #fff;
          .menu-content-cell {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(85, 85, 85);

            .menu-content-cell-link{
            }
            .menu-content-cell-link:hover{
              color: #00adff;
              text-decoration: underline;
            }
            .menu-content-cell-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #72cdf8;
            }
          }
          .menu-content-cell:hover{
            .menu-content-cell-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              color:#00adff;
            }
          }
        }
      }
    }
  }
  .dashboard-main-row:not(:last-child) {
    margin-bottom: 10px;
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
